<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Jquery+Json实现无刷新分页插件</title>
	<style type="text/css">
		<!--
		.warp_table{table-layout:auto;font-family:Arial,Helvetica,sans-serif;font-size:15px;border:1px #CCC solid;text-align:center;border-collapse:collapse;width:950px;cursor:default}.warp_table th{padding:5px;color:#03C;padding:.6em}.warp_table tbody tr.select{background:#EFe}.warp_table tbody tr.select td{color:#900;border-bottom-color:#0CC}.warp_table tbody tr.over{background:#EFF}.warp_table tbody tr.over td{color:#03c}.warp_table td{border-bottom:1px #ccc solid;border-top:1px #ccc solid;padding:.2em;color:#000}.warp_table td.highlight{color:#03c}.warp_table span{padding:.2em}.warp_table colgroup col{background-image:none}.warp_table colgroup col.c2{text-align:right}.warp_table td+td+td+td+td+td+td+td+td{text-align:right}.warp_table td:last-child{text-align:center}.warp_table input{cursor:pointer}
		-->
	</style>
	<link rel="stylesheet" href="${pageContext.request.contextPath}/ajax/css/pagination.css" />
	
	</head>

	<body>
		<table class="warp_table" align="center">
			<caption>
				<h2 class="title">用户列表</h2><a id="total"></a>
			</caption>
			<colgroup>
				<col class="cc" />
				<col />
				<col />
				<col />
				<col />
				<col />
				<col />
				<col />
				<col class="c2" />
				<col class="c2" />
				<col />
			</colgroup>
			<thead>
				<tr>
					<th>序号</th>
					<th>用户名</th>
					<th>密码</th>
				</tr>
			</thead>
			
			<tbody id="content">
			
			</tbody>
			<tbody id="Searchresult" style="display:none;"></tbody>
			<tr>
				<td id="Pagination" class="pagination" align="center" colspan="3"><!-- 这里显示分页 --></td>
			</tr>
		</table>
	<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/js/jquery.pagination.js"></script>
	<!--<script type="text/javascript" src="${pageContext.request.contextPath}/ajax/js/xhdata.js"></script>-->
	<script type="text/javascript">
		$(function(){
			var json = "${userJson}"//数据
			var showCount = 2;//每页显示多少条
			var jsonData  = eval(json);
			$.each(jsonData,function(i,n){
				$("#Searchresult").append("<tr><td>"+(i+1)+"</td><td>"+n.userName+"</td><td>"+n.passWord+"</td></tr>");  
			});
			var num_entries = $("#Searchresult tr").length;	
			$("#total").html("一共有 "+num_entries+" 条数据 每页显示"+showCount+"条");
			var initPagination = function() {
				// 创建分页
				$("#Pagination").pagination(num_entries, {
					num_edge_entries: 1, //边缘页数
					num_display_entries: 6, //主体页数
					callback: pageselectCallback,
					items_per_page:showCount //每页显示1项
				});
			 }();	 
			function pageselectCallback(page_index, jq){
				var max_elem = Math.min((page_index+1) *showCount, num_entries);		
				$("#content").html("");		
				for(var i=page_index*showCount;i<max_elem;i++){
					var new_content = $("#Searchresult tr:eq("+i+")").clone();
					$("#content").append(new_content); //装载对应分页的内容
				}
				return false;
			}
		});
	</script>
	</body>
</html>
